<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 添加商品类型 </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>

<body>
    <div class="ws-addGoods">
        <div id="tab">
            <ul>
              <li class="bui-tab-panel-item active"><a href="#">基本设置</a></li>
              <li class="bui-tab-panel-item"><a href="#">扩展属性</a></li>
              <li class="bui-tab-panel-item"><a href="#">规格</a></li>
              <li class="bui-tab-panel-item"><a href="#">价格区间</a></li>
            </ul>
          </div>
        <div class="row">
            <ul id="panel">
                <!-- 基本设置 -->
                <li class="ws-setting ws-active">
                    <form action="" class="form-horizontal">
                        <div class="control-group">
                          <label class="control-label"><span style="color:red;">*</span>店铺名称：</label>
                          <div class="controls">
                            <input type="text" class="input-large" data-role="shopName">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label">类型别名：</label>
                          <div class="controls">
                            <input type="text" class="input-large" data-role="shopAlias">
                            <p>（以"|"分隔，以"|"开头与结尾，如：“|T恤|T恤衫|”）</p>
                          </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">关联品牌：</label>
                            <div class="controls" data-role="brands" data-style="glpp">
                            </div>
                       </div>
                       <div class="form-actions span5 offset3">
                            <button id="btnSearch" type="submit" class="button button-primary">提交</button>
                       </div>
                    </from>
                </li>
                <!-- 扩展性能 -->
                <li class="ws-property">
                    <div class="ws-goods__top">
                        <span class="ws-btn ext-add" data-role="extendBtn">
                            <i class="ico-add"></i>
                            添加一个扩展属性
                        </span>
                        <p>输入项最多能够添加30个，选择项最多能添加20个</p>
                    </div>
                    <table class="ws-table" border=1>
                        <thead>
                            <tr>
                                <th>
                                    属性名
                                </th>
                                <th>
                                    属性别名(|分割)
                                </th>
                                <th>
                                    前台列表页表现类型
                                </th>
                                <th>
                                    选择项可选值
                                </th>
                                <th>
                                    显示
                                </th>
                                <th>
                                    排序
                                </th>
                                <th>
                                    删除
                                </th>
                            </tr>
                        </thead>
                        <tbody data-role="extend">
                        </tbody>
                    </table>

                </li>
                <!-- 规格 -->
                <li class="ws-size">
                    <div class="ws-goods__top">
                        <span class="ws-btn ext-add" data-role="chooseSize">
                            <i class="ico-add"></i>
                            选择规格
                        </span>
                    </div>
                    <table class="ws-table" border=1 style="margin: 10px auto 20px;width: 770px;">
                        <thead>
                            <tr>
                                <th>
                                    规格
                                </th>
                                <th>
                                    商品列表页显示方式
                                </th>
                                <th>
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody data-role="typeSpecJson">
                        </tbody>
                    </table>

                    <div id="size-content" class="hide">
                        <style>
                            /**内容超出 出现滚动条 **/
                            .bui-stdmod-body{
                              overflow-x : hidden;
                              overflow-y : auto;
                            }
                        </style>
                        <div class="ws-sizeL" id="size-contentLeft">
                            <p>
                                请选择规格
                            </p>
                            <div class="ws-sizeL_inner">
                                <ul>
                                </ul>
                                <div class="ws-sizeL__tips">
                                    没有找到需要的规格？
                                    <a href="javascript:;" data-role="addNewSize">添加新规格</a>
                                    <div id="addNewSize" class="hide">
                                        <div class="form-horizontal" data-role="addNewSizeTop">
                                            <div class="control-group">
                                              <label class="control-label"><span style="color:red;">*</span>规格名称：</label>
                                              <div class="controls">
                                                <input type="text" class="input-large" data-role="addNewSizeName">
                                              </div>
                                            </div>
                                            <div class="control-group">
                                              <label class="control-label">规格备注：</label>
                                              <div class="controls">
                                                <input type="text" class="input-large" data-role="addNewSizeBz">
                                              </div>
                                            </div>
                                            <div class="control-group">
                                              <label class="control-label">规格别名：</label>
                                              <div class="controls">
                                                <input type="text" class="input-large" data-role="addNewSizeAlias"><span>用 | 分割</span>
                                              </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">显示类型：</label>
                                                <div class="controls" data-role="addNewSizeRadio1">
                                                     <label class="radio">
                                                         <input type="radio" name="style" checked="checked" value="1">文字
                                                     </label>
                                                     <label  class="radio">
                                                         <input type="radio" name="style"value="2">图片
                                                     </label>
                                                </div>
                                           </div>
                                           <div class="control-group">
                                               <label class="control-label">显示方式：</label>
                                               <div class="controls" data-role="addNewSizeRadio2">
                                                    <label class="radio">
                                                        <input type="radio" name="method" checked="checked" value="1" data-value="平铺显示">平铺显示
                                                    </label>
                                               </div>
                                          </div>
                                       </div>
                                       <div class="ws-goods__top" style="width:640px;margin: 0 auto;">
                                           <span class="ws-btn ext-add" data-role="sizeBtn">
                                               <i class="ico-add"></i>
                                               添加规格值
                                           </span>
                                       </div>
                                       <table class="ws-table" border=1 style="margin: 0 auto 20px;width: 640px;"  data-role="addNewSizeBottom">
                                           <thead>
                                               <tr>
                                                   <th>
                                                       规格值名称
                                                   </th>
                                                   <th>
                                                       规格值别名
                                                   </th>
                                                   <th>
                                                       操作
                                                   </th>
                                               </tr>
                                           </thead>
                                           <tbody data-role="sizeW">
                                           </tbody>
                                       </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ws-sizeR">
                            <p>
                                规格预览区
                            </p>
                            <div class="ws-sizeR_inner">
                                <ul>
                                    <!-- <li class="ws-active">
                                        <p>
                                            颜色
                                        </p>
                                        <p>
                                             [显示方式：平铺显示]
                                        </p>
                                        <div class="ws-color">
                                            <div class="ws-color__inner">
                                                <p>
                                                    黑色
                                                </p>
                                                <div class="ws-color__real"></div>
                                            </div>
                                            <div class="ws-color__inner">
                                                <p>
                                                    黑色
                                                </p>
                                                <div class="ws-color__real"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <p>
                                            颜色
                                        </p>
                                        <p>
                                             [显示方式：平铺显示]
                                        </p>
                                        <div class="ws-text">
                                            <div class="ws-text__inner">
                                                <p>
                                                    黑色
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        3
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="extendAdd" class="hide">
                        <span class="ws-btn ext-add" data-role="extendChooseBtn"><i class="ico-add"></i>添加可选值</span>
                        <table class="ws-table" border=1 style="margin: 10px auto 20px;width: 670px;float:left">
                            <thead>
                                <tr>
                                    <th>
                                        选择项可选值
                                    </th>
                                    <th>
                                        操作
                                    </th>
                                </tr>
                            </thead>
                            <tbody data-role="extendChoose"></tbody>
                        </table>
                    </div>
                </li>
                <!-- 价格区间 -->
                <li class="ws-price">
                    <span class="ws-btn ext-price" data-role="priceBtn">添加价格区间</span>
                    <table class="ws-table" border=1 style="margin: 0 auto 20px;width: 750px;">
                        <thead>
                            <tr>
                                <th>
                                    最小值
                                </th>
                                <th>
                                    最大值
                                </th>
                                <th>
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody data-role="price">
                        </tbody>
                    </table>
                    <div class="form-actions span5 offset3">
                         <button id="" type="submit" class="button button-primary">保存</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="qq" data-role="addGoodsSubmit">
        提交
    </div>

    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
        BUI.use(['bui/tab','bui/mask'],function(Tab){

            var tab = new Tab.TabPanel({
              srcNode : '#tab',
              elCls : 'nav-tabs',
              itemStatusCls : {
                'selected' : 'active'
              },
              panelContainer : '#panel'//如果不指定容器的父元素，会自动生成
              //selectedEvent : 'mouseenter',//默认为click,可以更改事件

            });

            tab.render();
      });


         // 规格tab
         $(document).on('click', '.ws-sizeL_item', function() {
             var index = $(this).index();
             $('.ws-sizeR_inner ul li').eq(index).addClass('ws-active').siblings().removeClass('ws-active');
         })


          $(function() {

              // 删除逻辑
              $(document).on('click', '[data-role="trDel"]', function() {
                  $(this).closest('tr').remove();
              })

              // 上下移动
              $(document).on('click', '[data-role="trUp"]', function() {
                  var _this = $(this).closest('tr');
                  if(_this.prev()) {
                      _this.prev().before(_this);
                  }

              })
              $(document).on('click', '[data-role="trDown"]', function() {
                  var _this = $(this).closest('tr');
                  if(_this.next()) {
                      _this.next().after(_this);
                  }
              })
              // 添加价格
              $(document).on('click', '[data-role="priceBtn"]', function() {
                  var priceHtml = '<tr>\
                                      <td>\
                                          <input type="text" name="name"  data-role="min">\
                                      </td>\
                                      <td>\
                                          <input type="text" name="name"  data-role="max">\
                                      </td>\
                                      <td>\
                                          <i class="ico-del" data-role="trDel"></i>\
                                      </td>\
                                  </tr>';
                $('[data-role="price"]').append(priceHtml);
              })

              // 添加规格值
              $(document).on('click', '[data-role="sizeBtn"]', function() {
                  var sizeHtml = '<tr>\
                                      <td>\
                                          <input type="text" name="name" value="">\
                                      </td>\
                                      <td>\
                                          <input type="text" name="name" value="">\
                                      </td>\
                                      <td>\
                                          <i class="ico-asc-float" data-role="trUp"></i>\
                                          <i class="ico-desc-float" data-role="trDown"></i>\
                                          <i class="ico-del-float" data-role="trDel"></i>\
                                      </td>\
                                  </tr>';
                $('[data-role="sizeW"]').append(sizeHtml);
              })

              // 添加可选值
              $(document).on('click', '[data-role="extendChooseBtn"]', function() {
                  var dataId = $(this).attr('data-id');
                  var extendChooseHtml = '<tr>\
                                              <td>\
                                                  <input type="text" name="name" value="">\
                                              </td>\
                                              <td>\
                                                  <i class="ico-asc-float" data-role="trUp"></i>\
                                                  <i class="ico-desc-float" data-role="trDown"></i>\
                                                  <i class="ico-del-float" data-role="trDel"></i>\
                                              </td>\
                                          </tr>';
                $('[data-index="extendChoose'+dataId+'"]').append(extendChooseHtml);
              })

          })
    </script>
    <script src="./js/addGoodsStyle.js"></script>
</body>

</html>
